<template>
    <div class="ItemMusicContent">
        <div class="top">   
            <div class="Topleft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang_o"></use>
                </svg>
                <span class="playAll">播放全部</span>
                <span class="playcount">(共{{songs.length}}首)</span>
            </div>
            <div class="Topright">
                <van-button round type="danger" class="subcribbutton">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiahao"></use>
                    </svg>
                    <span>收藏({{playlist.subscribedCount}})</span>
                </van-button>
            </div>
        </div>
        <div class="songlist">
            <div class="song" v-for="(song,i) in songs" :key="i">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="leftSpan">{{ i + 1 }}</span>
                    <div class="songname">
                        <p>{{ song.name }}</p>
                        <span v-for="(artist, index) in song.ar" :key="index">{{artist.name}}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang_o"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danlieliebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
   name:'ItemMusicContent',
   props:['songs','playlist'],
   setup(props) {
    //    console.log(props);
    // 如果拿不playlist就拿sessionStorege的数据
       if(props.playlist.creator=''){
           let data = sessionStorage.getItem('itemDetail')
           this.playlist = JSON.parse(data)
       }
   },
   methods: {
       playMusic(i){
        //    console.log(song);
           this.updateplayList(this.songs)
           this.updateplayListIndex(i)
       },
       ...mapMutations(['updateplayList','updateplayListIndex'])
   },
}
</script>

<style lang='less'>
    .ItemMusicContent{
        width: 100%;
        height: 6rem;
        background-color: rgb(255, 255, 255);
        margin-top: .2rem;
        padding: .3rem;
        border-top-left-radius: .4rem;
        border-top-right-radius: .4rem;
        .top{
            display: flex;
            width: 100%;
            justify-content: space-between;
            .Topleft{
                width: 50%;
                display: flex;
                align-items: center;
                .icon{
                    fill: black;
                    width: .5rem;
                    height: .5rem;
                }
                .playAll{
                    margin-left: .15rem;
                    font-size: .32rem;
                    font-weight: 700;
                }
                .playcount{
                    font-size: .24rem;
                    opacity: 0.5;
                }
            }
            .Topright{
                right: 0;
                .subcribbutton{
                    display: flex;
                    align-items: center;
                    width: 3rem;
                    .icon{
                        width: 0.3rem;
                        height: 0.3rem;
                        fill: aliceblue;
                    }
                    span{
                        padding-left: .1rem;
                        font-size: .3rem;
                    }
                }
            }
        }
        .songlist{
            width: 100%;
            height: 1.2rem;
            .song{
                width: 100%;
                height: 1.2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .itemLeft{
                    width: 70%;
                    display: flex;
                    justify-content: flex-start;
                    .leftSpan{
                        padding: .2rem;
                        opacity: 0.7;
                        position: relative;
                        
                    }
                    .songname{
                        p{
                            font-weight: 700;
                            margin-bottom: .1rem;
                        }
                        span{
                            font-weight: 200;
                            opacity: 0.7;
                            font-size: .25rem;
                            
                        }
                    }
                }
                .itemRight{
                    width: 18%;
                    display: flex;
                    justify-content: space-between;
                    .icon{
                        width: .5rem;
                        height: .5rem;
                    }
                }
            }
        }
    }
</style>